<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单动画2</title>
		<style type="text/css">
		*{ margin: 0;padding: 0;}
		img{ width: 60px;
		     height: 40px;
		     position: absolute;
		     top:10px;
		     left: 20px;}
		ul{ width: 408px;
		    margin: 10px auto;}
		li{ list-style: none;
		   float: left;
		   width: 100px;
		   height: 80px;
		   border: #000 solid 1px;
		   overflow: hidden;
		    position: relative;}
		p{ position: absolute;
		   top: 57px;
		   left: 31px;}
		a{ text-decoration: none;}	
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#"><img src="../img/1 .jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/2.jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/3.jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/4.jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/5.jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/54111cd9000174cd04900170.jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/54111d7d00018ba604900170.jpg" alt="" /><P>测试</P></a></li>
			<li><a href="#"><img src="../img/54111d8a0001f41704900170.jpg" alt="" /><P>测试</P></a></li>
		</ul>
	</body>
</html>
<script src="../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('li a').find('img').mouseover(function(){
		$(this).stop(true).animate({'top':'-10px','opacity':0},2000,function(){
			$(this).css('top','100px');
			$(this).animate({'top':'10px','opacity':1})
		})
	})
</script>